<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Code Editor</title>
    <style>
        /* 编辑器容器的基本样式 */
        #editor {
            width: 100%;
            height: 500px;
            border: 1px solid #ddd;
            margin-top: 20px;
        }
        /* 编辑器容器的响应式样式 */
        @media (max-width: 600px) {
            #editor {
                height: 300px;
            }
        }
    </style>
    <!-- 引入 Ace Editor 的 CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.13/ace.min.css">
</head>
<body>
    <!-- 输入区 -->
    <div>
        <label for="editorMode">选择模式:</label>
        <select id="editorMode">
            <option value="javascript">JavaScript</option>
            <option value="python">Python</option>
            <option value="html">HTML</option>
            <option value="css">CSS</option>
        </select>
    </div>
    <!-- 编辑器容器 -->
    <div id="editor">console.log('Hello, World!');</div>
    <!-- 保存按钮 -->
    <button id="saveButton">保存内容</button>
    <!-- 加载 Ace Editor 的 JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.13/ace.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.13/ext-language_tools.js"></script>
    <!-- 引入自定义脚本 -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // 初始化 Ace Editor
            var editor = ace.edit("editor");
            editor.setTheme("ace/theme/chrome"); // 设置主题
            editor.session.setMode("ace/mode/javascript"); // 设置初始语言模式
            editor.setOptions({
                enableBasicAutocompletion: true, // 启用基本自动补全
                enableSnippets: true, // 启用代码片段
                enableLiveAutocompletion: true, // 启用实时自动补全
                fontSize: "12pt" // 设置字体大小
            });

            // 语言模式选择器
            var modeSelector = document.getElementById('editorMode');
            modeSelector.addEventListener('change', function () {
                var mode = modeSelector.value;
                editor.session.setMode("ace/mode/" + mode);
            });

            // 保存按钮
            var saveButton = document.getElementById('saveButton');
            saveButton.addEventListener('click', function () {
                var content = editor.getValue();
                saveContent(content);
            });

            // 保存内容到本地文件（使用 Blob）
            function saveContent(content) {
                var blob = new Blob([content], { type: 'text/plain' });
                var link = document.createElement('a');
                link.href = URL.createObjectURL(blob);
                link.download = 'code.txt';
                link.click();
            }
        });
    </script>
</body>
</html>
